import { useEffect, FC, useState, useRef } from 'react';
import { View, Canvas, Button, Text } from '@tarojs/components'
import './index.less';
import { AtActionSheet } from "taro-ui"
import { defaultTrendState, TrendStateType } from '../../components'
// import { EChart } from "echarts-taro3-react";
import Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts'
// import * as echarts from 'echarts';
import echarts from '../../config/echarts'
// import echartsForWeixin from 'echarts-for-weixin';
import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui"

// 定义 Props 接口:
interface Props {
  state: TrendStateType
  callback: () => void
}

const daysArr = [
  { label: '近7日', value: 'week', id: 1 },
  { label: '近15日', value: 'halfMouth', id: 2 },
  { label: '近30日', value: 'mouth', id: 3 },
  { label: '近90日', value: 'threeMouth', id: 4 },
  { label: '近半年', value: 'halfYear', id: 5 },
]

const Index: FC<Props> = ({ state = defaultTrendState, callback }) => {
  const { title, id, visible } = state
  // const [visible, setVisible] = useState(false)
  const [options, setOptions] = useState([])
  const [checkedDate, setCheckedDate] = useState('week')

  const echartsRef = useRef<EchartsHandle>(null)
  const option: EChartOption = {
    legend: {
      top: 50,
      left: 'center',
      z: 100
    },
    tooltip: {
      trigger: 'axis',
      show: true,
      confine: true
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  }

  useEffect(() => {
    if (visible && echartsRef.current) {
      setOptions(option)
      console.log('checkedDate', checkedDate)
    }
  }, [visible, checkedDate])
  return (
    <View className='trend'>
      <AtModal isOpened={visible} className='singleQuotes' onClose={() => callback()}>
        <AtModalHeader>{title}</AtModalHeader>
        <View className='switchDays'>
          {
            daysArr.map(item => {
              const { label, id, value } = item
              return <Text onClick={() => setCheckedDate(value)} className={`date ${checkedDate == value && 'becheckedDate'}`} key={id}>{label}</Text>
            })
          }
        </View>
        <View className='trend-echart' style={{ display: visible ? 'block' : 'none' }}>
          {
            visible && <Echarts
              echarts={echarts}
              option={option}
              ref={echartsRef}
              isPage={false}
              className='quotesEcharts'
            ></Echarts>
          }
        </View>
        <AtModalAction><Button onClick={callback}>确定</Button></AtModalAction>
      </AtModal>
      {/* <AtActionSheet isOpened={visible} onClose={callback} className='atActionSheet'>
        <View className='title'>{title}</View>
        <View className='trend-echart' style={{ display: visible ? 'block' : 'none' }}>
          <EChart ref={refBarChart} canvasId='bar-canvas' />
          {
            visible && <Echarts
              echarts={echarts}
              option={option}
              ref={echartsRef}
              isPage={false}
            ></Echarts>
          }
          <Canvas canvasId='myCanvas' style={{ display: "none" }} />
        </View>
      </AtActionSheet> */}
    </View>
  );
};

export default Index;
